<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
                <div id="app">
                    <!--事件中直接写js片段-->
                    <button @click="num++">增加</button><br/>

                    <!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
                    <button @click="num--">减少</button><br/>

                    <button v-on:click="fun1">++2</button>
                    <button v-on:click="fun2">--2</button>

                     <!--显示效果-->
                    <h1>num: {{num}}</h1>
                </div>

                <script type="text/javascript">
                    let app = new Vue({
                        el:"#app",
                        data:{
                            num:0,  //  初始化数据模型
                        },
                        methods:{
                            fun1(){
                                this.num+=2
                            },
                            fun2(){
                                this.num-=2
                            }
                        }

                    })
                </script>

</body>
</html>